<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div id="app">
        <h1>我是爹，下面是我的两个儿子</h1>
        <child ref="child1"></child>
        <child ref="child2"></child>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    parentName: 'mika-parent'
                }
            },
            mounted() {
                //可以发现，$childrend是一个数组, 包含了所有的子组件对象，因为我们上面用了两次child子组件，所以数组长度为2
                console.log(this.$children);
                console.log(this.$children[0],this.$children[1].childName);
                // 但是开发中比较少用，因为只能通过索引获取到具体的子组件对象，这个是十分难以维护的，因为后期维护过程中难免会加入新的组件，到时索引就全都变了，一改就要改一堆

                // 我们还是ref用的更多，可以看到，我们通过在html代码中自定义名字，可以很轻松拿到对应的子组件对象
                console.log(this.$refs.child1,this.$refs.child2.childName);
            },
            components: {
                child: {
                    template: `<h3 @click="getParent">我是儿子</h3>`,
                    data() {
                        return {
                            childName: 'mika-child'
                        }
                    },
                    methods:{
                        getParent(){
                            //可以看到，$parent不再是一个数组了，而是一个vue对象，其实道理很简单，因为爹可以有很多儿子，但是儿子肯定只有一个亲爹
                            console.log(this.$parent);
                            console.log(this.$parent.parentName);//可以拿到父组件身上的一些数据

                            // 不过要注意，虽然这样子组件可以直接拿到父组件身上的东西，但是实际开发中是不建议这样去使用的，因为这会导致代码的耦合度变高，另外，直接这样去随意修改父组件的状态，会让父组件的状态变得飘忽不定，后期难以去维护
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>